<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript">
			/*
			 * jQuery对象与js对象之间的转换
			 * jQuery的本质是一个数组，数组中包含多个dom对象
			 * var jquery = {dom对象,dom对象...};
			 * 注意：
			 * jQuery对象不能使用dom对象中的属性和方法
			 * dom对象也不能使用jquery对象中的属性和方法
			 * 但二者之间可以相互转换
			 * 转换格式：
			 * 1. dom对象-->jQuery对象：穿马甲
			 * 格式：
			 * 		dom对象-->$(dom对象);
			 * 
			 * 2. jQuery对象-->dom对象：脱马甲，取出jQuery数组中的dom对象
			 * 格式：
			 * 		jQuery对象-->jQuery对象[索引]
			 * 		jQuery对象-->jQuery对象.get(索引)
			 */
			
			$(function(){
				/*
				 * 使用dom对象获取id是mydiv的标签
				 * 获取标签体：dom对象.innerHTML
				 * 设置标签体：dom对象.innerHTML = 新的标签体
				 */
				var mydivEle = document.getElementById("mydiv");
//				alert(mydivEle.innerHTML);
				/*
				 * 使用jQuery对象获取id是mydiv的标签
				 * 在jQuery对象中把设置标签体和获取标签体封装为一个函数，函数名叫html
				 * 获取标签体：jQuery对象.html();
				 * 设置标签体：jQuery对象.html(新的标签体)
				 */
				var $mydivEle = $("#mydiv");
//				alert($mydivEle.html());
				
				var $mm = $(mydivEle);
				$mm.html("你是一个div");
//				$mm.innerHTML = "他是一个div";//jQuery对象不能使用dom对象的属性和方法
// 				jQuery对象-->dom对象：脱马甲，取出jQuery数组中的dom对象
				var d1 = $mydivEle[0];
				d1.innerHTML = "他是一个div";
				var d2 = $mydivEle.get(0);
				d2.innerHTML = "我是div";
			})
		</script>
	</head>
	<body>
		<div id="mydiv">我是一个div</div>
	</body>
</html>
